<template>
    <t-swiper
            :autoplay="true"
            :interval="3000"
            :loop="true"
    :style="{ width: '100%', height: swiperHeight }"
    class="uniform-height-swiper"
    >
    <t-swiper-item v-for="(img, index) in imageList" :key="index">
        <div class="swiper-item-wrapper">
            <t-image
                    :src="img"
                    fit="cover"
            :style="{ width: '100%', height: '100%' }"
            :alt="`轮播图${index+1}`"
            />
        </div>
    </t-swiper-item>
    </t-swiper>
</template>
<script setup>
    import { Swiper as TSwiper, SwiperItem as TSwiperItem } from 'tdesign-vue-next';

    const props = defineProps({
        imageList: {
            type: Array,
            default: () => [
                'https://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
                'https://tdesign.gtimg.com/demo/demo-image-1.png',
                'https://tdesign.gtimg.com/demo/demo-image-2.png'
            ]
        },
        swiperHeight: {
            type: String,
            default: '276px'
        }
    });
</script>

<style scoped>
    /* 1. 轮播容器：高度固定，为导航器提供稳定的居中基准 */
    ::v-deep .uniform-height-swiper {
        width: 100%;
        height: 100%;
        position: relative; /* 导航器绝对定位的父容器（TDesign默认已加，但需确保） */
    }

    /* 2. 轮播项容器：强制占满轮播容器高度，消除图片尺寸差异导致的高度波动 */
    .swiper-item-wrapper {
        width: 100%;
        height: 100%;
        /* 3. 图片居中核心：flex布局让图片在容器内垂直+水平居中 */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* 裁剪超出容器的图片部分（配合fit="cover"） */
    }

    /* 4. 图片适配：确保图片在容器内正确缩放且居中 */
    ::v-deep .t-image {
        object-fit: cover; /* 保持比例，填充容器（不会拉伸变形） */
        /* 禁用TDesign图片默认的max-width限制，确保占满容器 */
        max-width: none !important;
        max-height: none !important;
    }

    /* 5. 导航器样式强化：确保基于容器高度居中，且不被图片遮挡 */
    ::v-deep .uniform-height-swiper .t-swiper__navigation {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%); /* 精确垂直居中 */
        z-index: 10; /* 确保在图片上层 */
        padding: 0 16px; /* 左右留边，避免按钮贴紧屏幕边缘 */
        box-sizing: border-box;
    }

    /* 优化导航器按钮样式（可选） */
    ::v-deep .t-swiper__prev,
    ::v-deep .t-swiper__next {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ::v-deep .t-swiper__prev:hover,
    ::v-deep .t-swiper__next:hover {
        background-color: #fff;
    }
</style>
